<template>
    <div>
        <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
        <x-header title="值班人员" :left-options="{backText:'',preventGoBack:'true'}"
                    @on-click-back="toMap" >     
        </x-header>
        <div class="projectName">{{prjName}}</div>
        <div class="sup"></div>
        <div class="forSwipeRight">
        <div v-for="(item,index) in dutyInfo" :key="index" style="display:flex">
           <div v-if="item.map.url == '' || item.map.url == undefined" class="img_div">
                <div class="user_nophoto" v-if="item.map.userFullName.length < 3">
                    {{item.map.userFullName}}    
                </div>
                <div class="user_nophoto" v-else>
                    {{item.map.userFullName.substring(0,1)}}
                </div>
            </div>
            <div v-else class="img_div">
                <img :src="item.map.url" class="userphoto"/>
            </div>
            <div class="text_area">
                <div>
                    <div class="username">{{item.map.userFullName}}</div>
                    <div class="same_text">{{item.map.unitName}}</div>
                    <div class="same_text">考勤方式：{{item.map.workMode}}</div>
                    <div v-if="item.map.signState == 'false'" class="same_text">打卡请况：<span style="color:#6C5CFF">未打卡</span></div>
                    <div v-else class="same_text">打卡请况：<span style="color:#6C5CFF">已打卡</span></div>
                </div>
                <img v-if="item.map.signState == 'false'" src="../../assets/img/offline.png" class="line_img"/>
                <img v-else src="../../assets/img/online.png" class="line_img"/>
            </div>
        </div>
        </div>
        </v-touch>
    </div>
</template>

<script>
export default {
    name : "personOnDuty",
    data(){
        return {
            projectId : this.$route.params.projectId,
            prjName :  this.$route.params.prjName,
            dutyInfo : [],
            dutyInfo1 : [],
            imgList : [],
            url: "",
        }
    },
    mounted(){
        this.getParmas();
        this.getDutyPersonInfo();
    },
    methods:{
        getParmas(){
            console.log("projectId",this.projectId)
        },
         onSwipeRight(){
             this.$router.push({
                path:'/map',
                name:'map'
            })
        },
        toMap(){
            this.$router.push({
                path:'/map',
                name:'map'
            })
        },
        //获取值班人员信息
        getDutyPersonInfo(){
            this.$ajax({
                url : this.COMMON_URL,
                method : "post",
                data : {
                    _method : "HOME_FIX_PERMISSION_MENU.getDutyPersonInfo",
                    PROJECTID : this.projectId
                },
                async :  false
            }).then(res=>{
               this.getImgUrl(res);
            })
        },
          getImgUrl(res){
            this.dutyInfo1 = res.data.dutyPersonInfo.myArrayList;
            for(let i=0;i<this.dutyInfo1.length;i++){
                this.$ajax({
                    url : this.COMMON_URL,
                    method : 'post',
                    data : {
                        _method : "FIX_ACC_FILE_INFO.getFileWebPath",
                        fieldToken : this.dutyInfo1[i].map.userPhoto
                    },
                    async : false,
                }).then(res=>{
                    console.log(res)
                    var length = res.data.data.length;
                    var imgUrlStr = "";
                    let data1 = this.dutyInfo1[i]
                    if(length > 0){
                        var data = res.data.data[0];
                        imgUrlStr = data.FileUrl;
                        if(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/") != -1){
                            imgUrlStr = process.env.BASE_URL + '/qhszpm/' + imgUrlStr.substring(imgUrlStr.indexOf("tmpfiledownlaod/qhszpm/"));
                        }
                        
                        data1['url'] = imgUrlStr
                    }
                    this.$set(this.dutyInfo, i ,data1)
                })
            }
                
        }
    }
}
</script>

<style>
.forSwipeRight{
     width: 100%;
    height: -webkit-fill-available;
}
.text_area{
    display:flex;
    width: calc(100% - 70px);
    border-bottom:1px solid #f5f5f5;
    padding: 10px 0;
}
.same_text{
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(153,153,153,1);
    line-height:20px;
}
.username{
    font-size:16px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(25,25,25,1);
    line-height:20px;
}
.line_img{
    width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 5px;
    margin-right: 5%;
}
.img_div{
    padding: 10px;
}
.projectName{
    font-size:16px;
    font-family:PingFangSC-Semibold;
    font-weight:600;
    color:rgba(25,25,25,1);
    line-height:20px;
    padding: 15px;
}
.userphoto{
    width:50px;
    height:50px;
    border-radius:50%;
}
.user_nophoto{
    width:50px;
    height:50px;
    background:linear-gradient(180deg,rgba(106,135,255,1),rgba(77,102,254,1));
    border-radius:50%;
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .transition-view /deep/ .vux-header .vux-header-title {
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #262A34;
  font-family:PingFangSC-Semibold;
} */
.sup{
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #F5F5F5;
}
</style>
